// webpack公用配置
/* eslint-disable */
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const isProduction = function () {
  return process.env.NODE_ENV === 'production';
};

module.exports = {
  entry: {
    main: './src/main.js', // 入口文件
  },
  output: {
    filename: 'bundle.js', // 输出文件名
    path: path.join(__dirname, 'dist'), // 输出文件目录
  },
  module: {
    // loader配置
    rules: [
      {
        test: /\.vue$/,
        use: ['vue-loader'],
      },
      {
        test: /\.js$/,
        use: ['babel-loader'],
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'less-loader',
          },
        ],
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
          },
          {
            loader: 'css-loader',
          },
        ],
      },
      {
        test: /\.(png|jpg|jpeg|gif|ico)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10 * 1024, // 10kb
            esModule: false, // 处理vue-loader载入图片导致的[Object Module]问题
          },
        },
      },
      {
        test: /\.html$/,
        use: {
          loader: 'html-loader',
          options: {
            sources: true,
          },
        },
      },
    ],
  },
  // 插件配置
  plugins: [
    // 定义全局变量
    new webpack.DefinePlugin({
      BASE_URL: JSON.stringify('./'),
    }),
    // html模板编译，为了避免与html-loader的冲突，将index.html改为了ejs
    new HtmlWebpackPlugin({
      title: 'TRJ',
      template: './public/index.ejs',
    }),
    // 处理vue-loader
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin(),
  ],
};
